<template>
  <div class="energize-page">
    <div class="divider_header" style="margin: 40px 0">
      <div class="titel">
        <div class="divider divider-l" style="width: 600px"></div>
        <h5 style="fontsize: 36px">赋能服务</h5>
        <div class="divider divider-r" style="width: 600px"></div>
      </div>
    </div>
    <div class="content">
      <ul>
        <li
          v-for="(item, index) in list"
          :key="index"
          @click="jumpDetails(item)"
        >
          <div>
            <img v-if="item.abilityIcon" :src="item.abilityIcon" alt="" />
            <img v-else src="@/assets/home_Introduction_logo.png" alt="" />
            <span> {{ item.abilityName }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import api from "@/api/modules/home.js";
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      api.getFrontList().then((res) => {
        this.list = res.data;
      });
    },
    jumpDetails(val) {
      this.$router.push({ name: "energizeDetail", params: { value: val } });
    },
  },
};
</script>
<style lang="less">
.energize-page {
  margin: 64px 0;
  .content {
    ul {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      padding: auto;
      li {
        width: 20%;
        margin-bottom: 20px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        > div {
          width: 92%;
          padding: 24px 0;
          border: 1px solid #e8f2fd;
          img {
            width: 54px;
            height: 54px;
            margin: 0 auto;
          }
          span {
            display: block;
            font-size: 16px;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>;
